<template>
  <div class="l_body">
    <div class="container clearfix">
      <div class="l_main">
        <section class="post-list">
          <div class="post-wrapper" ref="p_wrapper"
               v-for="(item, index) in markdownData">
            <article class="post reveal" :data-sr-id="index"
                     :style=" index === 0 ?  '; visibility: visible;  -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: all 0.2s ease 0s, -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: all 0.2s ease 0s, transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ' : '; visibility: visible;  -webkit-transform: scale(0.9); opacity: 0;transform: scale(0.9); opacity: 0;'">
              <div class="page-template">
                <section class="meta">
                  <h2 class="title">
                    <a
                      v-on:click="jump({ name: 'details', params: { temp: item.templet }})">{{item.name}}</a>
                    <!--<router-link-->
                    <!--:to="{ name: 'details', params: { temp: item.templet }}">-->
                    <!--{{item.name}}-->
                    <!--</router-link>-->
                  </h2>
                  <time>
                    {{item.date}}
                  </time>
                  <div class="cats">
                    <a href="javacript:void(0);">{{item.label}}</a>
                  </div>
                </section>
                <section class="article typo">
                  <div :is="item.templet" v-highlight class="home"></div>
                  <div class="readmore">
                    <router-link class="flat-box waves-effect waves-block"
                                 :to="{ name: 'details', params: { temp: item.templet }}">
                      READ MORE
                    </router-link>
                  </div>
                  <div class="full-width auto-padding tags">
                    <a href="javacript:void(0);"><i class="fa fa-tag"></i>
                      {{item.desc}}</a>
                  </div>
                </section>
              </div>
            </article>
          </div>
        </section>
        <Pagination v-on:click="pageTurn" :current="pagT.current"
                    :pageSize="pagT.pageSize" :total="pagT.total"/>
      </div>
      <aside class="l_side" id="right side">
        <RightView/>
        <img :class="[this.isOpacity ? 'topping fadein' : 'topping fadeout']"
             @click="moveTop"
             src="">
      </aside>
    </div>
  </div>
</template>

<script>
  import RightView from './view/RightView'
  import Pagination from '../widget/pagination'
  import config from '../../common/DataSource/config'
  import * as Source from '../../common/DataSource/index'
  import './style/style.less';

  import utils from '../../until/optEvent'

  export default {
    name: 'MainContainer',
    components: {
      RightView,
      Pagination,
      ...Source
    },
    data() {
      let pageSize = 2;
      return {
        msg: 'Welcome to Your Vue.js App',
        markdownData: config.catalog.slice(0, pageSize),
        isOpacity: false,
        pagT: {
          current: 1,
          pageSize: pageSize,
          total: config.catalog.length,
        },
        ...Source
      }
    },
    created: function () {
      let _this = this;
      let len = _this.markdownData.length;
      window.addEventListener('scroll', function () {
        if (_this.$route.name !== 'home') return;

        utils.throttle(function () {
            _this.event(_this, len)
          }, 500);
      });
    },
    beforeDestroy: function () {
      window.removeEventListener('scroll', this.event);
    },
    methods: {
      event: function (_this, len) {
        let index = 1;
        let tagObj = document.getElementsByClassName('post-wrapper'); //refs路由切换后有BUG
        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        let isOpacity = scrollTop > 900;
        if (_this.isOpacity !== isOpacity) {
          _this.isOpacity = isOpacity;
        }
        if (index >= len) {
        } else if (tagObj[index].getBoundingClientRect().top < 550) {
          tagObj[index++].children[0].style.cssText = "; visibility: visible;  -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: all 0.2s ease 0s, -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: all 0.2s ease 0s, transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ";
        }
      },
      pageTurn: function ({bh}) {
        let {current, pageSize} = this.pagT;
        let currt = current + (bh ? 1 : -1);
        this.pagT.current = currt;
        this.markdownData = config.catalog.slice((currt - 1) * pageSize, currt * pageSize);
        setTimeout(function () {
          window.scroll(0, 0);
        })
      },
      moveTop: function () {
        window.scroll(0, 0);
      },
      jump: function (router) {
        this.$router.push(router);
      }
    },
  }
</script>
<style scoped>
  .topping {
    position: fixed;
    right: 130px;
    top: 650px;
    width: 48px;
    height: 48px;
    margin-left: 20px;
    cursor: pointer;
    opacity: 0;
  }

  .fadein {
    -webkit-animation-name: fadeIn;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1.5s;
    opacity: 1;
  }

  .fadeout {
    -webkit-animation-name: fadeOut;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1.5s;
    opacity: 0;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }
</style>
